
import { useNavigate } from 'react-router-dom'
import { List, Button } from 'antd-mobile'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'

function AccountManagement() {
  const navigate = useNavigate()

  const handleLogout = () => {

        // 清除token和用户信息
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        // 跳转到登录页
        navigate('/login')
    
  }

  const handleAccountDeletion = () => {
    navigate('/account_deletion')
  }

  const handleChangePassword = () => {
    // 这里可以添加修改密码的逻辑
    console.log('修改密码')
  }

  const handleChangePhone = () => {
    // 这里可以添加修改绑定手机号的逻辑
    console.log('修改绑定手机号')
  }

  return (
    <div className={styles.page}>
      <Nabar title='账号管理' sticky={false} />
      
      <div className={styles.card}>
        <List>
          <List.Item arrow={false}>
            <div className={styles.accountInfo}>
              <span className={styles.label}>账号</span>
              <span className={styles.value}>136****6666</span>
            </div>
          </List.Item>
          <List.Item arrow onClick={handleChangePhone}>
            <div className={styles.accountInfo}>
              <span className={styles.label}>绑定手机号</span>
              <span className={styles.value}>136****6666</span>
            </div>
          </List.Item>
        </List>
      </div>

      <div className={styles.card}>
        <List>
          <List.Item arrow onClick={handleAccountDeletion}>
            <div className={styles.accountInfo}>
              <span className={styles.label}>注销账号</span>
              <span className={styles.warning}>注销后账号无法恢复,请谨慎操作</span>
            </div>
          </List.Item>
          <List.Item arrow onClick={handleChangePassword}>
            <div className={styles.accountInfo}>
              <span className={styles.label}>修改密码</span>
              <span className={styles.action}>去修改</span>
            </div>
          </List.Item>
        </List>
      </div>

      <div className={styles.logoutContainer}>
        <Button 
          className={styles.logoutButton} 
          onClick={handleLogout}
          block
        >
          退出登录
        </Button>
      </div>
    </div>
  )
}

export default AccountManagement
